<template>
	<!-- 个人中心 -->
	<view class="container" v-if="isloding">
		<view class="infoCard">
			<image @tap="goInfoset" :src="avatar" class="touxiang" mode=""></image>
			<view class="text">
				用户昵称：{{user.nickname}}
			</view>
			<view class="text">
				电话号码：{{user.phone}}
			</view>
		</view>
		<view class="btnConent">
			<view class="top" @tap="goOrder(0)">
				查看
			</view>
			<view class="bottom">
				<view class="item" @tap="goOrder(0)">
					<image src="../../static/icon/stay1.png" class="icon" mode=""></image>
					<view class="title">
						待接单
					</view>
				</view>
				<view class="item" @tap="goOrder(1)">
					<image src="../../static/icon/in.png" class="icon" mode=""></image>
					<view class="title">
						进行中
					</view>
				</view>
				<view class="item" @tap="goOrder(2)">
					<image src="../../static/icon/Completed.png" class="icon" mode=""></image>
					<view class="title">
						已完成
					</view>
				</view>
				<view class="item" @tap="goOrder(3)">
					<image src="../../static/icon/cancel.png" class="icon" mode=""></image>
					<view class="title">
						已取消
					</view>
				</view>
			</view>
		</view>
		<view class="btnBottom">
			<view class="item" hover-class="active" @tap="goWallet">
				<image src="../../static/icon/qianbao.png" mode=""></image>
				<view class="title">
					我的钱包
				</view>
			</view>
			<view class="item" hover-class="active" @tap="goInvitation">
				<image src="../../static/icon/yaoqing.png" mode=""></image>
				<view class="title">
					邀请有奖
				</view>
			</view>
			<view class="item" hover-class="active" @tap="goCoupon">
				<image src="../../static/icon/youhui.png" mode=""></image>
				<view class="title">
					优惠卷
				</view>
			</view>
			<view class="item" hover-class="active" @tap="goShopping">
				<image src="../../static/icon/gouche.png" mode=""></image>
				<view class="title">
					购车商城
				</view>
			</view>
			<view class="item" hover-class="active" @tap="Phone">
				<image src="../../static/icon/kefu.png" mode=""></image>
				<view class="title">
					客服中心
				</view>
			</view>
			<view class="item" hover-class="active" @tap="goOpinion">
				<image src="../../static/icon/fankui.png" mode=""></image>
				<view class="title">
					意见反馈
				</view>
			</view>
			<view class="item" hover-class="active" @tap="goCharge">
				<image src="../../static/icon/guize.png" mode=""></image>
				<view class="title">
					收费规则
				</view>
			</view>
			<view class="item" hover-class="active" @tap="goHelp">
				<image src="../../static/icon/bangzu.png" mode=""></image>
				<view class="title">
					帮助中心
				</view>
			</view>
			<view class="item" hover-class="active" @tap="goOut">
				<image src="../../static/exit.png" mode=""></image>
				<view class="title">
					退出登录
				</view>
			</view>
		</view>
		<view class="botBtn" @tap="goDetaile">
			《用户协议及隐私政策》
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user:'',//用户登录信息
				isloding:false,
				token:'',
				avatar:''//头像
			};
		},
		onShow() {
			uni.getStorage({
			    key: 'user',
			    success: res=> {
					uni.hideLoading()
					this.user=res.data
					this.avatar=this.webUrl+res.data.avatar
					// console.log(this.avatar)
					this.isloding=true
			    }
			});
		},
		onLoad() {
			uni.showLoading({
				title: '加载中',
				mask: false
			});
			uni.getStorage({
			    key: 'user',
			    success: res=> {
					uni.hideLoading()
					this.user=res.data
					// console.log(this.user)
					this.avatar=this.webUrl+res.data.avatar
					// console.log(this.avatar)
					this.isloding=true
			    }
			});
			uni.getStorage({
			    key: 'token',
			    success: res=> {
					this.token=res.data
					uni.request({
						url: this.webUrl+'/user/my/hotline',
						method: 'GET',
						header:{
							token:res.data
						},
						data: {},
						success: Phone => {
							// console.log(Phone)
							this.phone=Phone.data.data.phone
						},
						fail: () => {},
						complete: () => {}
					});
			    }
			});
		},
		methods:{
			goDetaile(){
				uni.navigateTo({
					url: '../login/Agreement/Agreement',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			goOut(){
				uni.showModal({
				    title: '退出登录',
				    content: '是否要退出登录',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
							uni.removeStorage({
							    key: 'token',
							    success: function (res) {
							        console.log('success');
									uni.reLaunch({
									    url: '../login/login'
									});
							    }
							});
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			goInfoset(){
				uni.navigateTo({
					url: '../infoSet/infoSet?token='+this.token,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			goShopping(){
				uni.navigateTo({
					url: '../ShoppingMall/ShoppingMall?token='+this.token,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			Phone(){
				uni.makePhoneCall({
				    phoneNumber: this.phone //仅为示例
				});
			},
			goOrder(e){
				uni.navigateTo({
					url: '../Order/Order?id='+e+'&token='+this.token,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			goWallet(){
				uni.navigateTo({
					url: '../wallet/wallet?token='+this.token,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			goInvitation(){
				uni.navigateTo({
					url: '../Invitation/Invitation',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			goCoupon(){
				uni.navigateTo({
					url: '../Coupon/Coupon?token='+this.token,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			goOpinion(){
				uni.navigateTo({
					url: '../Opinion/Opinion?token='+this.token,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			goCharge(){
				uni.navigateTo({
					url: '../charge/charge',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			goHelp(){
				uni.navigateTo({
					url: '../Help/Help?token='+this.token,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body{
		height: 100%;
	}
	page{
		height: 100%;
	}
	.container{
		position: absolute;
		/* bottom: 0;
		left: 0;
		right: 0;
		top: 0; */
		height: auto!important;
		min-height: 200upx;
		background: #f2f2f2;
		.botBtn{
			// position: fixed;
			// bottom: 26upx;
			margin: 20upx 0 0 0upx;
			padding-bottom: 20upx;
			font-size: 24upx;
			width: 100%;
			text-align: center;
			text-decoration: underline;
			color: #007AFF;
		}
		.infoCard{
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #ff8b66;
			height: 386upx;
			border-radius:0px 0px 30upx 30upx;
			width: 100%;
			image{
				margin-top: 47upx;
				border-radius: 50%;
				width: 100upx;
				height: 100upx;
			}
			.text{
				color: #F1F1F1;
				font-size: 30upx;	
				font-family:Microsoft YaHei;
				font-weight:bold;
				margin-top: 28upx;
			}
		}
		.btnConent{
			width: 90%;
			// height: 180upx;
			background: #FFFFFF;
			border-radius: 20upx;
			margin: -60upx auto;
			.top{
				text-align: right;
				font-size:30upx;
				font-family:Microsoft YaHei;
				font-weight:400;
				padding-right: 27upx;
				line-height: 60upx;
				height: 60upx;
				border-bottom: 1upx solid #f2f2f2;
			}
			.bottom{
				justify-content: space-around;
				display: flex;
				.item{
					margin-top: 20upx;
					display: flex;
					align-items: center;
					flex-direction: column;
					image{
						width: 46upx;
						height: 50upx;
					}
					.title{
						margin-top: 8upx;
						font-size:32upx;
						font-family:Microsoft YaHei;
						font-weight:400;
						color:rgba(52,52,52,1);
						padding-bottom: 22upx;
					}
				}
			}
		}
		.btnBottom{
			margin-top: 100upx;
			widows: 100%;
			display: flex;
			flex-wrap: wrap;
			.active{
				background: rgba($color: #000000, $alpha: .1)!important;
			}
			.item{
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				background: #FFFFFF;
				border: 1upx solid #f2f2f2;
				box-sizing: border-box;
				width: 33.33%;
				height: 200upx;
				image{
					width: 50upx;
					height: 52upx;
				}
				.title{
					margin-top: 14upx;
					font-size: 30upx;
				}
			}
		}
	}
</style>
